The Tree menu AS component

Renders an AJAX based tree menu with expandable folders.

When placed on a Web page the component might look like the image below. 

The Tree menu component.

When to use

This component is typically used when there is a need to render a tree based menu. There are some compatibility issues with this component, see the Remarks section for more information. A developer can easily customize the component as the section below describes.

Customizing the tree menu

The tree menu component is highly customizable due to the fact that its visible interface is rendered by an Xsl stylesheet. Xsl is standard Xml development technique and by supplying your own stylesheet it is possible to change the look and feel of the tree menu generated. By default Tree menu is rendered using a standard stylesheet included in Content Studio and you can find this stylesheet in the System unit under the Stylesheets/Protected folder. Since this stylesheet is a part of the product and can be updated by the installation program you cannot edit this document but you can make a copy of it and use your own copy instead. As you can see from the source code below there are comments that indicates how to change the stylesheet.

Formatting xslt style sheet.

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html" version="1.0" indent="yes" />
    <xsl:param name="identifier" select="//@identifier" />

    <xsl:template match="/">
      <xsl:apply-templates select="//document" />
    </xsl:template>

    <xsl:template match="document">

        <!-- ***  This for each row  ***-->
        <li style="LIST-STYLE-TYPE: none;white-space:nowrap">
            <a tabindex="0" highlightClassName="" expandedClassName="">
                <xsl:attribute name="documentid"><xsl:value-of select="elementid" /></xsl:attribute>
                <xsl:attribute name="hasChild"><xsl:value-of select="child" /></xsl:attribute>
                <xsl:attribute name="id">treeMenu<xsl:value-of select="elementid" /></xsl:attribute>
                <xsl:attribute name="target"><xsl:value-of select="data/target" /></xsl:attribute>
                <xsl:attribute name="href">
                    <!--If you want clickable containers you need to change a few lines in this stylesheet
		    1)Remove <xsl:if test="child = 0"> and </xsl:if> and <xsl:if test="child = 1">#treeMenu<xsl:value-of select="elementid" /></xsl:if> below."
                    -->
                    <xsl:if test="child = 0"><xsl:if test="data/url = ''">default.aspx?<xsl:value-of select="$identifier" />=<xsl:value-of select="elementid" /></xsl:if><xsl:value-of select="data/url" /></xsl:if>
                    <xsl:if test="child = 1">#treeMenu<xsl:value-of select="elementid" /></xsl:if>
                </xsl:attribute>
                <xsl:if test="child = 1">
                    <xsl:attribute name="name">treeMenu<xsl:value-of select="elementid" /></xsl:attribute>
                    <xsl:attribute name="style">text-decoration:none;cursor:default;</xsl:attribute>
                    <!--2) change the onclick row below this comment to:
			<xsl:attribute name="onclick">if(!window.event || window.event.type == 'load'){expand(this, '~images/TreeMenu/18_folder.gif', '~images/TreeMenu/18_folderopen.gif');}</xsl:attribute>
		        and remove the style, name attribute-element above.
		    -->
                    <xsl:attribute name="onclick">expand(this, '~images/TreeMenu/18_folder.gif', '~images/TreeMenu/18_folderopen.gif');return false;</xsl:attribute>
                    <xsl:attribute name="unselectable">on</xsl:attribute>
                    <img border="0" align="absmiddle" src="~images/TreeMenu/18_folder.gif">
                    <xsl:attribute name="alt"><xsl:value-of select="elementname"/></xsl:attribute>
                    </img>
                </xsl:if>
                <xsl:if test="child = 0">
                    <xsl:attribute name="onclick">setTreeMenuCookie('<xsl:value-of select="elementid" />');</xsl:attribute>
                    <img border="0" align="absmiddle" src="~images/TreeMenu/18_page.gif">
                    <xsl:attribute name="alt"><xsl:value-of select="elementname"/></xsl:attribute>
                    </img>
                </xsl:if>
                <xsl:value-of disable-output-escaping="yes" select="data/data" />
                <span style="padding-left:1px;padding-right:3px;padding-top:2px;padding-bottom:2px;" highlightColor="highlight" highlightTextColor="highlighttext">
                    <xsl:attribute name="id">treeMenuText<xsl:value-of select="elementid" /></xsl:attribute>
                    <xsl:value-of select="elementname" />
                </span>
            </a>
        </li>
    </xsl:template>
</xsl:stylesheet>

Parent document id

Optional, the document to render the menu from. Leave this parameter empty to use the current document as a starting point.

Margin

The margin of the rendered output.

User defined xsl style sheet

An Xsl stylesheet that renders the menu. By default this parameter specifies the standard built in stylesheet but a developer can specify her own stylesheet if needed.

Enable view state

Turns on the view state.

This component works with Internet Explorer 5 and later (on PC platform only) and has been tested on Netscape and Mozilla Firefox. However it should be compatible with all modern Web browsers that can consume AJAX based Web sites.

The Insert menu 3.0 component also has support for rendering tree menus and does so in a Html standard fashion and supports an even wider range of Web Browsers. However, that component is slower and generates far more data than Tree menu. If your Web site will only be used on the Web Browser mentioned above Tree menu can be a good alternative. Tree menu reads data only when a folder is clicked and only one level at the time. This ensures that only a small amount of data is read at the time and once read Tree menu remembers the fetched data until the page is closed.

General remarks with menu components

All menu driven components uses the Content Studio menu API:s and hierarchy document structures. The caller must have BROWSE permission to all items displayed and every item must be live and published. When the menu renders Content Studio traverses through the entire document tree and whenever there is a document that is not available to the caller the travers operation breaks at this point. This have the effect that any object that is a child of a unavailable document will be left out since the tree is broken at that point.